:local(.PropertiesContainer) {

  position: relative;
  outline: none;

  background: var(--color-grey-225-10-97);

  &.open {
    outline: solid 1px var(--color-grey-225-10-75);

    & > .toggle {
      display: none;
    }
  }

  .toggle {
    position: absolute;
    left: -23px;
    top: calc(50% - 31px);
    padding: 7px 10px;
    transform-origin: top left;
    z-index: 12;
    fill:var(--color-grey-225-10-85);

    &:hover{
      fill: var(--color-grey-225-10-75);

      & + .resize-area  .resize-handle {
        background-color:  var(--color-blue-205-100-50);
      } 

    }
  }

  .resize-area {
    cursor: ew-resize;
    z-index: 11;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 16px;
    user-select: none;
    transition: 0s border;
    display: flex;
    justify-content: center;

    &.snapped-right {
      transform: translateX(-100%);
      cursor: w-resize;

      & > .resize-handle {
        margin-left: auto;
      }
    }

    &.snapped-left {
      transform: translateX(-6px);
      cursor: e-resize;
    
      & > .resize-handle {
        margin-right: auto;
        transform: translateX(6px)
      }
    }

    &:hover > .resize-handle  {
      background-color:  var(--color-blue-205-100-50);
      transition-delay: 200ms;
    }

    &.dragging {

      & > .resize-handle {
        background-color:  var(--color-blue-205-100-50);
      }
  
      & + .toggle {
        opacity: 0;
      }
    }
  }

  .resize-handle {
    width: 3px;
  }

  .properties-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
  }

  .bio-properties-panel {
    --font-family: inherit;
    --font-family-monospace: inherit;
    background: var(--color-white);
  }

}